<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="curId ? '编辑用户名单' : '新增用户名单'"
    width="700px"
    :before-close="close"
  >
    <el-form
      ref="ruleForm"
      label-position="left  "
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="车牌号码">
        <el-input v-model="ruleForm.carplate" readonly />
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input v-model="ruleForm.userid" readonly />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="ruleForm.nickname" readonly />
      </el-form-item>
      <el-form-item label="车管所名" prop="dmv">
        <el-select v-model="ruleForm.dmv" placeholder="选择车管所名">
          <el-option
            v-for="(item,index) in dmvData"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="品牌种类" prop="variety">
        <el-select v-model="ruleForm.variety" placeholder="选择品牌种类">
          <el-option
            v-for="(item,index) in varietyData"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="合格证号">
        <el-input v-model="ruleForm.certificate" readonly />
      </el-form-item>
      <el-form-item label="机动车凭证">
        <el-input v-model="ruleForm.voucher" readonly />
      </el-form-item>
      <el-form-item label="车辆识别代号">
        <el-input v-model="ruleForm.identify" readonly />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { getPlateByCarplate, updatePlate } from '@/api/select/plateManage'
export default {
  name: 'CuForm',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    curId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      ruleForm: {
        username: '',
        nickname: '',
        roles: '',
        sex: '',
        carplate: {
          dmv: '', // 车管所
          voucher: '', // 机动车凭证
          variety: '', // 品牌种类
          certificate: '', // 合格证号
          identify: '', // 车俩识别代号
          carplate: '' // 车牌号
        }
      },
      dmvData: [{
        label: '南昌交管局车管所',
        value: '南昌交管局车管所'
      },
      {
        label: '赣州交管局车管所',
        value: '赣州交管局车管所'
      },
      {
        label: '宜春交管局车管所',
        value: '宜春交管局车管所'
      },
      {
        label: '吉安交管局车管所',
        value: '吉安交管局车管所'
      },
      {
        label: '抚州交管局车管所',
        value: '抚州交管局车管所'
      },
      {
        label: '上饶交管局车管所',
        value: '上饶交管局车管所'
      },
      {
        label: '九江交管局车管所',
        value: '九江交管局车管所'
      },
      {
        label: '鹰潭交管局车管所',
        value: '鹰潭交管局车管所'
      },
      {
        label: '景德镇交管局车管所',
        value: '景德镇交管局车管所'
      },
      {
        label: '新余交管局车管所',
        value: '新余交管局车管所'
      },
      {
        label: '萍乡交管局车管所',
        value: '萍乡交管局车管所'
      }],
      varietyData: [
        {
          label: '小型汽车',
          value: '小型汽车'
        },
        {
          label: '小型新能源汽车',
          value: '小型新能源汽车'
        },
        {
          label: '大型新能源汽车',
          value: '大型新能源汽车'
        }],
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogVisible(v) {
      if (v) {
        if (this.curId) {
          getPlateByCarplate(this.curId).then((res) => {
            this.ruleForm = res.data.carplate
          })
        }
      }
    }
  },
  methods: {
    close() {
      this.$refs.ruleForm.resetFields()
      this.$emit('close')
    },
    search() {
      this.close()
      this.$emit('search')
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.curId) {
            console.log(this.ruleForm)
            updatePlate(this.curId, this.ruleForm).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.search()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
